<template>
  <div 
    :class="['stat-card relative overflow-hidden rounded-2xl p-6 border transition-all duration-300 ease-out', customClass]"
    :style="cardStyle"
  >
    <!-- 装饰性背景元素 -->
    <div class="stat-card-decoration absolute -right-20 -top-20 w-40 h-40 rounded-full opacity-10" :style="decorationStyle"></div>
    
    <div class="stat-card-content relative z-10 flex justify-between items-start">
      <div class="stat-info flex-1">
        <p class="stat-title text-sm font-medium mb-2 text-gray-500 transition-colors duration-300" :style="{color: titleColor}">{{ title }}</p>
        <p class="stat-value text-3xl font-bold mb-3 transition-colors duration-300" :style="{color: valueColor}">{{ value }}</p>
        <div class="stat-change flex items-center gap-2 text-sm">
          <span :class="['stat-change-indicator font-medium flex items-center transition-all duration-300', getChangeClass()]">
            <Icon 
              :icon="getChangeIcon()"
              :size="14" 
              class="mr-1 transition-all duration-300"
              :style="{color: changeColor}"
            />
            {{ change }}
          </span>
          <span class="stat-change-label text-gray-400 opacity-80 transition-opacity duration-300 hover:opacity-100">{{ t('pypm.index.compareToLastWeek') }}</span>
        </div>
      </div>
      
      <!-- 美化的图标容器 -->
      <div 
        class="stat-icon-container group w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-110"
        :style="{backgroundColor: iconBgColor}"
      >
        <!-- 图标光晕效果 -->
        <div 
          class="stat-icon-glow absolute inset-0 rounded-2xl blur-md opacity-50 transition-opacity duration-300"
          :style="{backgroundColor: iconColor}"
        ></div>
        <!-- 图标 -->
        <Icon 
          :icon="icon" 
          :size="26" 
          class="stat-icon relative z-10 transition-all duration-300 group-hover:scale-110"
          :style="{color: iconColor}"
        />
      </div>
    </div>
    
    <!-- 底部装饰条 -->
    <div class="stat-card-footer absolute bottom-0 left-0 w-full h-1 transition-all duration-700 ease-out" :style="{backgroundColor: borderColor}"></div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Icon } from '@/components/Icon/index'

// 定义组件属性
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'primary'
    // 支持: primary, success, warning, info, purple, pink, teal
  },
  change: {
    type: String,
    required: true
  },
  customClass: {
    type: String,
    default: ''
  }
})

defineOptions({
  name: 'StatCard'
})

const { t } = useI18n()

// 颜色配置对象
const colorConfig = computed(() => {
  const configs: Record<string, {
    primary: string,
    light: string,
    dark: string,
    bgLight: string,
    textPrimary: string,
    textSecondary: string
  }> = {
    primary: {
      primary: '#1890ff',
      light: '#40a9ff',
      dark: '#096dd9',
      bgLight: 'rgba(24, 144, 255, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    },
    success: {
      primary: '#52c41a',
      light: '#73d13d',
      dark: '#389e0d',
      bgLight: 'rgba(82, 196, 26, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    },
    warning: {
      primary: '#faad14',
      light: '#ffc53d',
      dark: '#d48806',
      bgLight: 'rgba(250, 173, 20, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    },
    info: {
      primary: '#909399',
      light: '#a6a9ad',
      dark: '#73767a',
      bgLight: 'rgba(144, 147, 153, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    },
    purple: {
      primary: '#722ed1',
      light: '#9254de',
      dark: '#531dab',
      bgLight: 'rgba(114, 46, 209, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    },
    pink: {
      primary: '#eb2f96',
      light: '#f56c6c',
      dark: '#c41d7f',
      bgLight: 'rgba(235, 47, 150, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    },
    teal: {
      primary: '#13c2c2',
      light: '#36cfc9',
      dark: '#08979c',
      bgLight: 'rgba(19, 194, 194, 0.05)',
      textPrimary: '#262626',
      textSecondary: '#595959'
    }
  }
  return configs[props.color] || configs.primary
})

// 计算卡片样式
const cardStyle = computed(() => {
  const config = colorConfig.value
  return {
    backgroundColor: 'white',
    borderColor: `${config.primary}20`, // 透明度20%
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
    transform: 'translateY(0)',
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  }
})

// 装饰性背景元素样式
const decorationStyle = computed(() => {
  const config = colorConfig.value
  return {
    backgroundColor: config.primary,
    filter: 'blur(30px)'
  }
})

// 标题颜色
const titleColor = computed(() => colorConfig.value.textSecondary)

// 数值颜色
const valueColor = computed(() => colorConfig.value.textPrimary)

// 图标背景色
const iconBgColor = computed(() => colorConfig.value.bgLight)

// 图标颜色
const iconColor = computed(() => colorConfig.value.primary)

// 底部边框颜色
const borderColor = computed(() => colorConfig.value.primary)

// 变更指示器颜色
const changeColor = computed(() => {
  if (props.change.startsWith('+')) return '#52c41a' // 成功色
  if (props.change.startsWith('-')) return '#faad14' // 警告色
  return '#8c8c8c' // 灰色
})

// 获取变更指示器图标
const getChangeIcon = () => {
  if (props.change.startsWith('+')) return 'ep:arrow-up'
  if (props.change.startsWith('-')) return 'ep:arrow-down'
  return 'ep:minus'
}

// 获取变更指示器样式
const getChangeClass = () => {
  const baseClasses = 'transition-all duration-300 ease-out'
  if (props.change.startsWith('+')) return `${baseClasses} text-success hover:scale-105`
  if (props.change.startsWith('-')) return `${baseClasses} text-warning hover:scale-105`
  return `${baseClasses} text-gray-500`
}
</script>

<style scoped lang="scss">
// 现代化变量
$transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

// 统计卡片基础样式
.stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, white 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid transparent;
  backdrop-filter: blur(8px);
  transition: $transition-base, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  cursor: default;
  
  // 悬浮效果
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: rgba(24, 144, 255, 0.3);
    
    .stat-card-footer {
      height: 3px;
    }
  }
  
  // 焦点效果
  &:focus-within {
    outline: 2px solid rgba(24, 144, 255, 0.3);
    outline-offset: 2px;
  }
}

// 卡片内容
.stat-card-content {
  position: relative;
  z-index: 10;
}

// 装饰元素
.stat-card-decoration {
  transition: $transition-base;
  transform: translate(30%, -30%);
  
  .stat-card:hover & {
    transform: translate(20%, -20%);
    opacity: 0.15;
  }
}

// 底部装饰条
.stat-card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition: $transition-base;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}

// 数值样式增强
.stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1.1;
  position: relative;
  display: inline-block;
  
  &::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: -4px;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0;
    transition: $transition-base;
  }
  
  .stat-card:hover &::after {
    opacity: 0.2;
  }
}

// 图标容器样式
.stat-icon-container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  // 悬浮效果
  &:hover {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

// 图标光晕效果
.stat-icon-glow {
  transition: $transition-base;
  transform: scale(0.8);
  
  .stat-icon-container:hover & {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

// 图标样式
.stat-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}

// 标题样式
.stat-title {
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

// 变更指示器样式
.stat-change-indicator {
  font-weight: 600;
  letter-spacing: -0.2px;
}

// 变更标签样式
.stat-change-label {
  transition: $transition-base;
}

// 响应式调整
@media screen and (max-width: 768px) {
  .stat-card {
    padding: 20px 16px;
    
    .stat-value {
      font-size: 28px;
    }
    
    .stat-icon-container {
      width: 14px;
      height: 14px;
      
      .stat-icon {
        font-size: 22px;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .stat-card {
    padding: 16px;
    
    .stat-value {
      font-size: 24px;
    }
    
    .stat-icon-container {
      width: 12px;
      height: 12px;
      
      .stat-icon {
        font-size: 20px;
      }
    }
  }
}

// 滚动动画 - 当卡片进入视图时的动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 添加到父组件可以使用的类
.stat-card-animate {
  animation: fadeInUp 0.6s ease-out forwards;
}

.stat-card-animate-delay-1 {
  animation-delay: 0.1s;
}

.stat-card-animate-delay-2 {
  animation-delay: 0.2s;
}

.stat-card-animate-delay-3 {
  animation-delay: 0.3s;
}
</style>
